module.exports = {
  "users": [
    {
      "id": 1,
      "username": "admin",
      "password": 123456,
      "roleState": true,
      "default": true,
      "region": "",
      "roleId": 1,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "铁锤",
      "password": "123",
      "roleState": true,
      "default": false,
      "region": "亚洲",
      "roleId": 2,
      "id": 2,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "钢蛋",
      "password": "123",
      "roleState": true,
      "default": false,
      "region": "南极洲",
      "roleId": 2,
      "id": 3,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "诸葛山珍",
      "password": "123",
      "roleState": true,
      "default": false,
      "region": "",
      "roleId": 1,
      "id": 4,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "西门吹灯",
      "password": "123",
      "roleState": true,
      "default": false,
      "region": "南极洲",
      "roleId": 3,
      "id": 5,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "轩辕翠花",
      "password": "123",
      "roleState": true,
      "default": false,
      "region": "南极洲",
      "roleId": 3,
      "id": 6,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "司马海味",
      "password": "123",
      "roleState": true,
      "default": false,
      "region": "亚洲",
      "roleId": 3,
      "id": 7,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "咕噜墩子",
      "password": "123",
      "roleState": true,
      "default": false,
      "region": "北美洲",
      "roleId": 2,
      "id": 8,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "遇见yaya",
      "password": "123",
      "region": "",
      "roleId": 1,
      "roleState": true,
      "default": false,
      "id": 9,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    },
    {
      "username": "zhangfan1",
      "password": "123",
      "region": "",
      "roleId": 1,
      "roleState": true,
      "default": false,
      "id": 11,
      "token": "asdaseqeqweqsdsasdqwewqsdassqeewqdaeqeqdasdqe"
    }
  ],
  "roles": [
    {
      "id": 1,
      "roleName": "超级管理员",
      "roleType": 1,
      "rights": [
        "/user-manage",
        "/user-manage/add",
        "/user-manage/delete",
        "/user-manage/update",
        "/user-manage/list",
        "/right-manage",
        "/right-manage/role/list",
        "/right-manage/right/list",
        "/right-manage/role/update",
        "/right-manage/role/delete",
        "/right-manage/right/update",
        "/right-manage/right/delete",
        "/audit-manage/audit",
        "/audit-manage/list",
        "/publish-manage/unpublished",
        "/publish-manage/published",
        "/publish-manage/sunset",
        "/home",
        "/news-manage",
        "/news-manage/list",
        "/news-manage/category",
        "/news-manage/draft",
        "/news-manage/preview/:id",
        "/news-manage/update/:id",
        "/news-manage/add",
        "/audit-manage",
        "/publish-manage"
      ]
    },
    {
      "id": 2,
      "roleName": "区域管理员",
      "roleType": 2,
      "rights": [
        "/home",
        "/user-manage",
        "/user-manage/add",
        "/user-manage/delete",
        "/user-manage/update",
        "/user-manage/list",
        "/news-manage",
        "/news-manage/list",
        "/news-manage/add",
        "/news-manage/update/:id",
        "/news-manage/preview/:id",
        "/news-manage/draft",
        "/news-manage/category",
        "/audit-manage",
        "/audit-manage/audit",
        "/audit-manage/list",
        "/publish-manage",
        "/publish-manage/unpublished",
        "/publish-manage/published",
        "/publish-manage/sunset"
      ]
    },
    {
      "id": 3,
      "roleName": "区域编辑",
      "roleType": 3,
      "rights": [
        "/home",
        "/news-manage/add",
        "/news-manage/update/:id",
        "/news-manage/preview/:id",
        "/news-manage/draft",
        "/audit-manage",
        "/audit-manage/list",
        "/publish-manage",
        "/publish-manage/unpublished",
        "/publish-manage/published",
        "/publish-manage/sunset",
        "/news-manage"
      ]
    }
  ],
  "children": [
    {
      "id": 3,
      "title": "添加用户",
      "rightId": 2,
      "key": "/user-manage/add",
      "grade": 2
    },
    {
      "id": 4,
      "title": "删除用户",
      "rightId": 2,
      "key": "/user-manage/delete",
      "grade": 2
    },
    {
      "id": 5,
      "title": "修改用户",
      "rightId": 2,
      "key": "/user-manage/update",
      "grade": 2
    },
    {
      "id": 6,
      "title": "用户列表",
      "rightId": 2,
      "key": "/user-manage/list",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 8,
      "title": "角色列表",
      "rightId": 7,
      "key": "/right-manage/role/list",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 9,
      "title": "权限列表",
      "rightId": 7,
      "key": "/right-manage/right/list",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 10,
      "title": "修改角色",
      "rightId": 7,
      "key": "/right-manage/role/update",
      "grade": 2
    },
    {
      "id": 11,
      "title": "删除角色",
      "rightId": 7,
      "key": "/right-manage/role/delete",
      "grade": 2
    },
    {
      "id": 12,
      "title": "修改权限",
      "rightId": 7,
      "key": "/right-manage/right/update",
      "grade": 2
    },
    {
      "id": 13,
      "title": "删除权限",
      "rightId": 7,
      "key": "/right-manage/right/delete",
      "grade": 2
    },
    {
      "id": 15,
      "title": "新闻列表",
      "rightId": 14,
      "key": "/news-manage/list",
      "grade": 2
    },
    {
      "id": 16,
      "title": "撰写新闻",
      "rightId": 14,
      "key": "/news-manage/add",
      "grade": 2,
      "pagepermisson": 1
    },
    {
      "id": 17,
      "title": "新闻更新",
      "rightId": 14,
      "key": "/news-manage/update/:id",
      "grade": 2,
      "routepermisson": 1
    },
    {
      "id": 18,
      "title": "新闻预览",
      "rightId": 14,
      "key": "/news-manage/preview/:id",
      "grade": 2,
      "routepermisson": 1
    },
    {
      "id": 19,
      "title": "草稿箱",
      "rightId": 14,
      "key": "/news-manage/draft",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 20,
      "title": "新闻分类",
      "rightId": 14,
      "key": "/news-manage/category",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 22,
      "title": "审核新闻",
      "rightId": 21,
      "key": "/audit-manage/audit",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 23,
      "title": "审核列表",
      "rightId": 21,
      "key": "/audit-manage/list",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 25,
      "title": "待发布",
      "rightId": 24,
      "key": "/publish-manage/unpublished",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 26,
      "title": "已发布",
      "rightId": 24,
      "key": "/publish-manage/published",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 27,
      "title": "已下线",
      "rightId": 24,
      "key": "/publish-manage/sunset",
      "pagepermisson": 1,
      "grade": 2
    }
  ],
  "rights": [
    {
      "id": 1,
      "title": "首页",
      "key": "/home",
      "pagepermisson": 1,
      "grade": 1
    },
    {
      "id": 2,
      "title": "用户管理",
      "key": "/user-manage",
      "pagepermisson": 1,
      "grade": 1
    },
    {
      "id": 7,
      "title": "权限管理",
      "key": "/right-manage",
      "pagepermisson": 1,
      "grade": 1
    },
    {
      "id": 14,
      "title": "新闻管理",
      "key": "/news-manage",
      "pagepermisson": 1,
      "grade": 1
    },
    {
      "id": 21,
      "title": "审核管理",
      "key": "/audit-manage",
      "pagepermisson": 1,
      "grade": 1
    },
    {
      "id": 24,
      "title": "发布管理",
      "key": "/publish-manage",
      "pagepermisson": 1,
      "grade": 1
    }
  ],
  "categories": [
    {
      "id": 1,
      "title": "时事新闻",
      "value": "时事新闻"
    },
    {
      "id": 2,
      "title": "环球经济",
      "value": "环球经济"
    },
    {
      "id": 3,
      "title": "科学技术",
      "value": "科学技术"
    },
    {
      "id": 4,
      "title": "军事世界",
      "value": "军事世界"
    },
    {
      "id": 5,
      "title": "世界体育",
      "value": "世界体育"
    },
    {
      "id": 6,
      "title": "生活理财",
      "value": "生活理财"
    }
  ],
  "regions": [
    {
      "id": 1,
      "title": "亚洲",
      "value": "亚洲"
    },
    {
      "id": 2,
      "title": "欧洲",
      "value": "欧洲"
    },
    {
      "id": 3,
      "title": "北美洲",
      "value": "北美洲"
    },
    {
      "id": 4,
      "title": "南美洲",
      "value": "南美洲"
    },
    {
      "id": 5,
      "title": "非洲",
      "value": "非洲"
    },
    {
      "id": 6,
      "title": "大洋洲",
      "value": "大洋洲"
    },
    {
      "id": 7,
      "title": "南极洲",
      "value": "南极洲"
    }
  ],
  "news": [
    {
      "title": "正义必胜！人民大会堂这场晚会上的珍贵影像来自这里",
      "region": "国内",
      "content": "<p style=\"text-align: justify;\"><span style=\"background-color: rgb(225, 60, 57);\"><strong>“莫欺我中华无肝胆，母亲膝下百万兵”！9月3日晚，纪念中国人民抗日战争暨世界反法西斯战争胜利80周年文艺晚会《正义必胜》在北京人民大会堂举行，“刘老庄连”全员补齐的动人场景引发热议。</strong></span></p><p style=\"text-align: justify;\"><span style=\"background-color: rgb(225, 60, 57);\"><strong>晚会中还有不少类似的场景，而</strong></span><span style=\"background-color: rgb(225, 60, 57); font-size: 16px;\"><strong>这场晚会的一大亮点就是将虚拟舞台背景与历史真实影像相结合。演出背景中呈现的一段段珍贵历史影像，吸引了众人目光，也把大家带回到当时的烽火岁月中。</strong></span></p>",
      "status": true,
      "id": "OyyHFg97Mq-AQFeqKtX_e",
      "author": "admin",
      "createTime": 1757060043917
    },
    {
      "title": "今天周二了,还有三天了又要考试了",
      "region": "国内",
      "content": "<p><span style=\"color: rgb(225, 60, 57); font-size: 22px; font-family: 楷体;\"><u><em><strong>马上周考二了,做好准备了吗😇</strong></em></u></span></p>",
      "status": false,
      "id": "N3ib3UCZr-ToGSm3Hm_Uu",
      "author": "admin",
      "createTime": 1756775026460
    },
    {
      "title": "测试一下啦",
      "region": "农业",
      "content": "<p style=\"line-height: 2.5;\"><span style=\"color: rgb(225, 60, 57); background-color: rgb(245, 219, 77); font-size: 24px; font-family: 楷体;\"><u><em><strong>这就是个测试啦,不要着急了😇</strong></em></u></span></p><table style=\"width: auto;\"><tbody><tr><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\">ID</th><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\">姓名</th><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\">年龄</th></tr><tr><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">1</td><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">李逵</td><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">33</td></tr></tbody></table><p><br></p>",
      "status": false,
      "id": "X6KMzQ-SyV0JjU2QYQSjk",
      "author": "admin",
      "createTime": 1756731803894
    },
    {
      "title": "哈哈哈哈",
      "region": "农业",
      "content": "<ul><li><span style=\"color: rgb(225, 60, 57);\">啦啦啦啦啦啦</span></li></ul>",
      "status": false,
      "id": "Lm-h9pAjDl7Kxz0Yz4aFI",
      "author": "admin",
      "createTime": 1756731089585
    },
    {
      "title": "你好啊",
      "region": "国际",
      "content": "<p><span style=\"color: rgb(225, 60, 57);\"><u><em><strong>这是测试</strong></em></u></span></p>",
      "status": false,
      "id": "aCjuNxMSj5cPPYZzBbHna",
      "author": "admin",
      "createTime": 1756730938055
    },
    {
      "title": "你好啊",
      "region": "国际",
      "content": "<p><span style=\"color: rgb(225, 60, 57);\">12312312321321312</span></p>",
      "status": true,
      "id": "VNBGsK7Zg2k8TsuXRU71E",
      "author": "admin",
      "createTime": 1756730370347
    },
    {
      "title": "图标",
      "region": "娱乐",
      "content": "<p>🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣</p>",
      "status": true,
      "id": "tqKqLx83ccIFT0qdgUojP",
      "author": "admin",
      "createTime": 1756729582065
    },
    {
      "title": "余庆：“凉资源”引爆“热经济” 游客纷至沓来觅清凉",
      "region": "国内",
      "content": "<p>盛夏时节，热浪席卷而来，而余庆县却宛如一颗镶嵌在黔北的清凉明珠，凭借得天独厚的气候条件和丰富的生态资源，成为众多游客避暑纳凉的理想之地，也由此催生出蓬勃发展的避暑经济，为县域发展注入强劲动力。</p><p><img src=\"https://pics6.baidu.com/feed/9a504fc2d56285359f7281eaf9c548d6a6ef6321.jpeg@f_auto?token=22b4b28bce58324e99f59c2819e2dfb6\" alt=\"\" data-href=\"\" style=\"width: 699.828px;\"/></p><p>在余庆县白泥镇大龙村，“龙鸣山庄”的招牌在青山绿树间格外醒目。走进民宿，宽敞的庭院、木质的桌椅、古朴的装饰，让人仿佛置身于宁静的世外桃源。民宿主人杨林原本是一名外出务工人员，看到家乡避暑经济的发展潜力后，毅然返乡创业。今年夏天，他的民宿迎来了一批又一批客人。</p><p>“这里空气清新，气温宜人，每天清晨在鸟叫声中醒来，傍晚漫步在林间小道，远离城市的喧嚣，这种感觉太惬意了。”来自广东的游客林女士一家，虽是第一次来到这里，却对这里的环境赞不绝口。</p><p>“从六月底到现在，民宿几乎天天爆满，周末更是一房难求。很多客人都是回头客，还会介绍朋友来。”据杨林介绍，仅在七月，“龙鸣山庄”的收入就达到了5万多元，带动周边村民就业20余人。</p><p><img src=\"https://pics5.baidu.com/feed/3801213fb80e7bec6c20a9cf450487289a506be4.jpeg@f_auto?token=e8ee1cd5b771d32b963d7afce58d900b\" alt=\"\" data-href=\"\" style=\"width: 699.828px;\"/></p><p>飞龙湖景区同样热闹非凡。游船穿梭在碧波之上，游客们尽情欣赏着两岸的壮美风光。在游船甲板上，一群来自重庆的游客兴奋地拍照留念。领队张先生说：“我们是在网上看到飞龙湖的介绍，被这里的美景吸引过来的。果然名不虚传，这里的水比我们重庆的江还要清澈，山也很秀丽，关键是温度比重庆低了好几度，避暑游玩两不误。”</p><p>景区负责人表示，为了迎接暑期客流高峰，景区新增了两艘游船，还推出了夜游飞龙湖的项目，让游客领略不一样的湖光夜色。入夏以来，飞龙湖景区日均接待游客较去年同期增长了40%。</p><p><img src=\"https://pics6.baidu.com/feed/cf1b9d16fdfaaf513c14adafe67eaafef11f7ae1.jpeg@f_auto?token=8fd9c46be0c6e572b2e8a6ee70c0144e\" alt=\"\" data-href=\"\" style=\"width: 699.828px;\"/></p><p>除了民宿和景区，余庆县的特色美食也成为避暑经济的一大亮点。在县城的美食街，乌江鱼、剔骨鸭等特色菜肴香气扑鼻，吸引了众多食客。经营剔骨鸭总店的方老板忙得不亦乐乎：“每天都要准备几百斤鸭子，还是供不应求。很多游客吃完后在网上下单购买真空包装的剔骨鸭。”美食街的火爆也带动了周边商铺的生意，特产店的苦丁茶、霉豆腐等产品销量大幅增长。</p><p>如今的余庆，避暑经济正如火如荼地发展着。它不仅为游客带来了清凉与欢乐，也让当地百姓的钱包鼓了起来，更为县域经济的可持续发展开辟了新路径。</p><p>通讯员 王永娟 王杰</p><p>编辑 胡蕊</p><p>二审 田仁碧</p><p>三审 徐升帆</p>",
      "status": false,
      "id": "SnRCeB8cCUI6eshInUdY0",
      "author": "admin",
      "createTime": 1756729507831
    },
    {
      "title": "莫迪告诉特朗普，印度“不急于”购买美制F-35战机",
      "region": "军事",
      "content": "参考消息网8月2日报道据今日俄罗斯电视台网站8月1日报道，彭博社7月31日援引知情官员的话报道称，印度今年2月告诉美国，该国“不急于”购买美制F-35隐形战斗机。\n据报道，印度总理莫迪今年2月访问白宫时，美国总统特朗普曾提出向新德里出售这款战机。报道称，印度更热衷于聚焦共同设计和制造战机的伙伴合作。\n然而，印度外交部淡化了彭博社的这篇报道。\n印度外交国务部长1日在议会下院说：“莫迪总理与美国总统于2025年2月会晤后发表的印美联合声明提到，美国将对其向印度出售第五代战斗机（如F-35）和水下作战系统的政策进行评估。目前还没有就这个问题进行正式讨论。”\n报道指出，向印度出售战斗机将减少美国与这个南亚国家之间411.8亿美元的贸易逆差。\n本周，美国对从印度进口的商品征收25%的对等关税，因为两国未能在8月1日这一最后期限前达成贸易协议。\n在莫迪2月份访问华盛顿期间，特朗普曾说，美国希望增加对印度的武器销售，并最终向印度提供最新战机。特朗普对记者说：“我们将向印度增加数十亿美元的军售。我们也在为最终向印度提供F-35隐形战斗机铺平道路。”\n美国副总统万斯在4月访问印度时表示，F-35可以增强印度空军的防御能力。\n在万斯发表这番言论之前，F-35和俄罗斯的苏-57均在班加罗尔举行的印度航空展上进行了展示。\n防务分析人士说，苏-57与美国竞争对手F-35相比有明显的优势，包括更低的成本和技术转让机会，这使得它对长期依赖俄罗斯系统的印度空军具有吸引力。（编译/李莎）",
      "status": true,
      "id": "F8W9G7q2-YLEww2pg_vf1",
      "author": "admin",
      "createTime": 1756475576418
    },
    {
      "title": "国家级运动健将刘峡君收到北大录取通知书，她表示将就读新闻与传播学院",
      "region": "娱乐",
      "content": "据了解，今年19岁的刘峡君是四川资阳市雁江区人，曾就读于雁江区第三小学。刘峡君自小就酷爱运动，常年参加雁江区田径训练，并很快崭露头角。2018年，正在上小学的刘峡君参加资阳市田径运动会小学组100米比赛，以12.89秒的佳绩夺冠并打破赛事纪录，成为资阳第一个突破13秒的女子百米运动员。\n刘峡君在田径比赛中的出色成绩引起了四川省田径队的注意。此后，在教练叶虎的指导下，刘峡君迅速成长：2020年，四川省青少年田径锦标赛女子100米冠军、200米亚军；2021年，全国学生运动会女子100米铜牌（11.88秒）；2023年，亚青赛100米银牌、4×100米接力金牌；2025年，在全国田径大奖赛首站比赛中，刘峡君在女子100米项目中连破个人最佳成绩，取得预赛11秒61，半决赛11秒55的成绩，达到国家级健将标准。\n今年高考，在宜宾市叙州区东辰学校读书的刘峡君考出462分，因她是国家级运动健将，其高考成绩已达到清华大学和北京大学高水平运动队关于文化课成绩的要求（只需过本科线的65%），有望被清华大学或者北京大学录取。\n刘峡君告诉红星新闻记者，她将就读北京大学新闻与传播学院，专业为体育教育。根据学校安排，刘峡君将于8月18日赶到学校报到。刘峡君说，整个暑假她没有其他安排，都忙于比赛。\n红星新闻记者 罗敏\n编辑 潘莉 责编 官莉",
      "status": true,
      "id": "NuiqY-cZXi_2IIgX78Xpq",
      "author": "admin",
      "createTime": 1756475501046
    },
    {
      "title": "贵州一漂流景区大量游客滞留至凌晨，景区致歉并展开整改",
      "region": "国内",
      "content": "杉木河漂流景区以漂流体验闻名。据多名网友发帖反映，8月2日，该景区因未控制好客流，导致漂流结束后大量游客滞留。有游客称，票价包含摆渡车接驳服务，漂流后需要坐观光车回到游客大厅换衣服，但当日漂流结束后迟迟等不到摆渡车，只能长时间滞留景区。有游客步行几公里回游客大厅，“就算坐上车也出不去，都堵在路上了。”\n\n记者在一段游客拍摄的视频中看到，夜幕笼罩，大量游客排队等待，现场拥挤、秩序混乱，退票的声音此起彼伏。“（接驳车）20分钟一趟车，一趟车才接二十几个人”，直到凌晨之后，游客才走出景区。\n\n也有网友称，发现景不少空闲的大巴车停留，不理解为何不能把游客有序接走。\n\n在社交平台的投诉中，景区被质疑服务管理混乱。有游客反映称，漂流结束后排队时间长，入场时也仅有两三个入口，队伍绵延百米；有游客目击到下午两点景区入客量已达六千多人，却未采取限流措施；花费50元购买行李托运服务，“上岸后行李却迟迟不来”；一些现场无人发救生衣，“有些女孩子根本抢不过”；终点堆积大量汽艇和救生衣，一些小孩子被堵得上不来。\n\n8月3日凌晨，涉事景区的运营商施秉县杉木河旅游开发公司（以下简称“景区”），在抖音账号“黔行施秉”发布了致歉信。\n\n“我们深知，每一位游客选择来到我们景区，都是对我们的信任与支持，而我们却未能用完善的服务和有序的管理回报这份信任，这让我们深感不安。”景区称，为了弥补此次的过失，也为了在未来给游客提供优质的游览体验，将迅速展开整改。\n\n“我们将升级游客流量监测系统，加强对游客数量的实时监控和预判，提前做好预警工作，一旦接近承载上限及时采取限流等管控措施。”景区称，还将对工作人员进行系统培训，提升应对突发状况能力，“确保在任何情况下都能为大家提供高效、贴心的服务。”此外，将优化景区的交通疏导方案，增加摆渡车运力，减少游客等待时间。\n\n“恳请各位游客朋友给予我们悔过自新的机会。”景区称，期盼以优质的服务弥补此次遗憾。",
      "status": true,
      "id": "gfI50wuEQrvx6jEjgZqp9",
      "author": "admin",
      "createTime": 1756474479504
    },
    {
      "title": "中阿经贸合作提质升级动能强劲",
      "region": "全球",
      "content": "驼铃古道焕新韵，万里商机拓新途。8月28日至31日，第七届中国—阿拉伯国家博览会在宁夏银川举行，中外嘉宾相聚贺兰山下、塞上湖城，共绘合作蓝图。\n\n作为中阿共建“一带一路”的重要经贸平台，第七届中阿博览会以“创新、绿色、繁荣”为主题，聚焦经贸、能源、科技等传统合作领域，拓展数字经济、人工智能等新兴合作领域，设置了共建“一带一路”国家、区域经济合作、中央企业、清洁能源、数字经济和特色商品六大展区。\n\n据介绍，来自75个国家和地区及全国各地的7600余位嘉宾、2200多家商协会和企业代表参会，预计参展参会嘉宾达1.78万名。首次实现22个阿拉伯国家和全国31个省区市、新疆生产建设兵团和港澳台地区全部参会，充分展现了本届中阿博览会的吸引力和影响力。\n\n务实合作活力涌动\n\n从古代舟舶继路、商使交属的繁荣景象，到如今中阿经贸合作的热潮涌动，中国与阿拉伯国家跨越山海阻隔，纵贯千年时光，不断续写友好合作的新篇章。\n\n阿联酋是本届博览会主宾国。主宾国代表团团长、阿联酋经济与旅游部副部长萨利赫表示，此行深切感受到宁夏日新月异的发展变化和在促进阿中关系发展中发挥的积极作用。阿方愿同宁夏一道落实两国元首重要共识，拓展更多领域、更高层次合作，实现共同发展。\n\n在第七届中阿博览会开幕式上，索马里总理哈姆扎·阿卜迪·巴雷表示，中国提出共建“一带一路”倡议并搭建合作平台，证明互联互通与开放合作是实现共同发展的最佳路径，将开辟更广阔的发展前景，带来更多繁荣与稳定。\n\n“中阿博览会为我们提供了一个实现高层对话、促进经济合作的重要平台，也为进一步深化各国的多领域务实合作注入了新动能。”加纳总统特别代表、议会多数党领袖阿亚里加·马哈马在开幕式上表示，将与中国进一步拓展合作空间，持续深化在矿产资源开发、能源化工、基础设施建设等重点领域的合作，加中两国必将迎来更加广阔的发展前景。\n\n近年来，中阿经贸往来日益密切。数据显示，中国连续多年稳居阿拉伯国家第一大贸易伙伴国地位。2024年中阿贸易额达4074亿美元，同比增长2.3%，其中中国对阿出口2060亿美元，自阿进口2014亿美元。中国已同全部22个阿拉伯国家和阿拉伯国家联盟签署“一带一路”合作文件，实现全覆盖，并与多个阿拉伯国家的发展战略对接，双方在共建“一带一路”框架内实施了200多个大型项目。\n\n“中阿博览会为我们提供了开拓阿拉伯国家市场的更好机遇。通过市场调研发现，我们的产品在阿拉伯国家有着很好的应用前景。”宁夏隆基宁光仪表股份有限公司副总经理孙水龙说，公司主要从事能源计量、能源管理和清洁能源应用业务，产品包括智能电表、智慧能源管理系统、智慧水务解决方案等。该公司正从前期主要针对国内市场，发展到现在的国内国外市场兼顾，通过本届博览会，有望在阿拉伯国家市场实现突破。\n\n“我们展出了多个世界非物质文化遗产类产品，比如具有千年历史的阿勒颇古皂、大马士革玫瑰制品、吹制玻璃等，还包含天然精油皂、橄榄油、大马士革锦缎、贝壳镶嵌手工艺品等，许多产品出口数十个国家及地区。”叙利亚展团负责人董晶岩表示，叙中两国间的贸易合作由来已久，未来仍有很大的合作空间，希望通过参加博览会帮助更多的叙利亚企业拓展中国市场，也希望能与优秀的中国企业深化合作，加强两国贸易往来，促进共同发展。\n\n中阿博览会助力并见证了中阿经贸合作的蓬勃生机。据宁夏回族自治区商务厅副厅长庞子杰介绍，本届博览会参展国家数量实现新突破，覆盖范围之广、国际化程度之高均创历届之最，生动展现了中阿合作平台的凝聚力和吸引力。\n\n本届博览会期间发布的《中阿经贸关系发展进程2024年度报告》提出，目前中阿经贸领域合作呈现出贸易量稳质增不断优化、投资转型升级持续加速、承包工程合作捷报频传、新兴领域合作百花齐放的态势。展望未来，中阿经贸合作将超越简单的资源与商品互换，向技术共研、标准共建、价值链共塑的高阶形态演进。这不仅有助于阿拉伯国家实现经济多元化目标，也将推动中阿双方战略互信和务实合作迈向更高水平。\n\n凝“新”聚力共赴未来\n\n首次设立“绿电应用专区”、首次设置新品发布区、首次开设人工智能展、首次举办外贸优品全国行展示展销活动……本届中阿博览会上有多个“首次”亮相，不仅丰富了博览会的内容，也彰显出中阿在科技创新、产业转型、绿色低碳、基础设施等重要领域的新合作热潮。\n\n在数字经济展区人工智能展台，深圳大象安泰科技有限公司展出的仿真人形机器人不仅能歌善舞，还能承担迎宾、接待、导览等任务。该公司商务总监周渝奇介绍，该款机器人已经应用到政务、文旅、教育、营销等多个场景。“我们希望能通过中阿博览会来进一步提高产品知名度，拓宽国际销售渠道。”周渝奇说。\n\n北京智谱华章科技股份有限公司国际中心客户总监陈皓介绍，本次展示的新一代大模型GLM—4.5在单个模型中实现了推理、编程、智能体三大核心能力的“三位一体”融合，为行业应用提供了强大的基础能力支撑。在谈及公司的布局时，陈皓坦言：“我们的全球化起步虽然不算早，但发展速度非常快。非常期待能够与阿拉伯世界的头部企业建立更紧密的联系，深入探讨合作机遇，共同推动人工智能技术在各行业的创新与应用，共创一个更加智能化的未来。”\n\n第七届中阿博览会清洁能源展区首次设立了“绿电应用专区”，集中展示前沿科技成果，为中阿双方在新能源技术领域的合作搭建重要平台。其中，宁夏自然课生态环境有限公司展出的集装箱植物工厂系统，是本届博览会单体最大的展品。该公司副总经理马金涛介绍，植物工厂可以让蔬菜、牧草等植物在可控的模拟环境下生长，还能运用绿电直连技术，与光伏、风电等清洁能源实现对接，赋予了荒漠、城市空间等非传统耕地全新的农业价值，较为契合阿拉伯国家的气候特点。“我们致力于以科技力量突破传统农业局限，提供可持续的绿色生产新模式，助力生态农业高质量发展。”马金涛说。\n\n走进也门国家馆展区，具有当地民族特色的手工艺品、地毯、围巾、香料等产品引人驻足。也门阿拉伯工艺品有限公司总经理阿拉丁在接受经济日报记者采访时表示，中国为也门输华产品提供了零关税待遇，高质量共建“一带一路”为也门带来了实实在在的好处。“中国市场规模庞大且发展态势良好，过去几年我们参加过很多中国展会，每次都收获很多，也积累了来自中国多个城市的客户。”阿拉丁说。\n\n宁夏回族自治区党委书记、人大常委会主任李邑飞表示，宁夏作为共建“一带一路”重要节点，将坚定不移扩大对外开放，发挥好中阿博览会的重要平台作用，与各国共建开放互通的经贸通道，共促绿色低碳的能源合作，共兴特色鲜明的现代农业，共筑数字经济的发展高地。\n\n目前，宁夏已与包括阿拉伯国家及共建“一带一路”国家在内的56个国家和地区的116家商协会建立稳定合作关系，为本地企业“走出去”拓展国际市场、将优质项目“引进来”赋能地方发展搭建了高效平台。\n\n据银川海关统计，今年前7个月，宁夏对阿拉伯国家联盟进出口总值达3.2亿元，同比增长41.5%，沙特、阿联酋和埃及为前三大贸易伙伴。宁夏作为中阿经贸合作的重要窗口，正依托中国—阿拉伯国家博览会，推动双方在光伏能源、新型材料、机械制造等能源转型领域加强协作。\n\n中阿经济结构优势互补，经贸合作提质升级的动能强劲。中阿博览会正成为双方务实合作的坚实支点，随着合作领域不断拓宽、层次日益深化、成果越发丰硕，中阿经贸合作将迎来更广阔的发展前景和新的发展机遇。（经济日报记者 孙亚军 杨开新 马呈忠）",
      "status": false,
      "id": "mmiR9CwQ7Px6j11lY4F3R",
      "author": "admin",
      "createTime": 1756456192649
    },
    {
      "title": "小笔记 JSON.stringify用法及三个参数",
      "region": "亚洲",
      "content": "二、语法\n        语法： 可以有三个参数，第一个是传入要序列化的值，第二个为函数或者数组，第三个是文本添加缩进、空格和换行符。\n\nJSON.stringify(value, replacer, space)：\n\n\n1、value：第一个参数，将要序列后成 JSON 字符串的值。\n2、replacer：【可选】第二个参数\n（1） 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；\n（2） 如果参数是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。\n（3） 如果该参数为未提供或者null ，则对象所有的属性都会被序列化。\n3、space：【可选】第三个参数，美化文本格式，文本添加缩进、空格和换行符，\n（1） 如果 该参数 是一个数字，则返回值文本在每个级别缩进指定数目的空格\n（2） 该参数最大值为10，如果 该参数大于 10，则文本缩进 10 个空格。\n（3）该参数也可以使用非数字，如：\\t。最大值为10",
      "status": true,
      "id": "QM_4BOO4I1vnbqVabBoBf",
      "author": "admin",
      "createTime": 1756436278861
    },
    {
      "title": "Introducing JSX",
      "categoryId": 2,
      "content": "<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">This funny tag syntax is neither a string nor HTML.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">JSX produces React “elements”. We will explore rendering them to the DOM in the</span> <a href=\"https://reactjs.org/docs/rendering-elements.html\" target=\"_self\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">next section</span></a><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">. Below, you can find the basics of JSX necessary to get you started.</span></p>\n<h3 style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Why JSX?</span></h3>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Instead of artificially separating</span> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><em>technologies</em></span> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">by putting markup and logic in separate files, React</span> <a href=\"https://en.wikipedia.org/wiki/Separation_of_concerns\" target=\"_blank\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">separates</span> <span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><em>concerns</em></span></a> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">with loosely coupled units called “components” that contain both. We will come back to components in a</span> <a href=\"https://reactjs.org/docs/components-and-props.html\" target=\"_self\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">further section</span></a><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">, but if you’re not yet comfortable putting markup in JS,</span> <a href=\"https://www.youtube.com/watch?v=x7cQ3mrcKaY\" target=\"_blank\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">this talk</span></a> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">might convince you otherwise.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React</span> <a href=\"https://reactjs.org/docs/react-without-jsx.html\" target=\"_self\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">doesn’t require</span></a> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">With that out of the way, let’s get started!</span></p>\n<h3 style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Embedding Expressions in JSX</span></h3>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">In the example below, we declare a variable called</span> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>name</code></span> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">and then use it inside JSX by wrapping it in curly braces:</span></p>\n<p style=\"text-align:start;\"></p>\n<pre style=\"margin-left:1rem;\"><br>&nbsp;</pre>\n",
      "region": "全球",
      "author": "admin",
      "roleId": 1,
      "auditState": 2,
      "publishState": 2,
      "createTime": 1615778715619,
      "star": 600,
      "view": 983,
      "id": 3,
      "publishTime": 1615778911762,
      "status": false
    },
    {
      "title": "Rendering Elements",
      "categoryId": 3,
      "content": "<p style=\"text-align:start;\"></p>\n<h2 style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React Only Updates What’s Necessary</span></h2>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.</span></p>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">You can verify by inspecting the</span> <a href=\"https://reactjs.org/redirect-to-codepen/rendering-elements/update-rendered-element\" target=\"_blank\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">last example</span></a> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">with the browser tools:</span></p>\n<p style=\"margin-left:0px;\"></p>\n<img src=\"https://reactjs.org/c158617ed7cc0eac8f58330e49e48224/granular-dom-updates.gif\" alt=\"DOM inspector showing granular updates\" style=\"height: ;width: \"/>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Even though we create an element describing the whole UI tree on every tick, only the text node whose contents have changed gets updated by React DOM.</span></p>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">In our experience, thinking about how the UI should look at any given moment, rather than how to change it over time, eliminates a whole class of bugs.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(109,109,109);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Is this page useful?</span><a href=\"https://github.com/reactjs/reactjs.org/tree/master/content/docs/rendering-elements.md\" target=\"_self\"><span style=\"color: rgb(55,57,64);background-color: transparent;font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Edit this page</span></a>&nbsp;</p>\n",
      "region": "全球",
      "author": "admin",
      "roleId": 1,
      "auditState": 2,
      "publishState": 3,
      "createTime": 1615778740202,
      "star": 800,
      "view": 869,
      "id": 4,
      "publishTime": 1615778912481
    },
    {
      "title": "Components and Props",
      "categoryId": 4,
      "content": "<p style=\"text-align:start;\"><span style=\"color: rgb(109,109,109);font-size: 18px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a</span> <a href=\"https://reactjs.org/docs/react-component.html\" target=\"_self\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 18px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">detailed component API reference here</span></a><span style=\"color: rgb(109,109,109);font-size: 18px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.</span></p>\n<h2 style=\"text-align:start;\"><br> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Let’s recap what happens in this example:</span></h2>\n<ol>\n<li style=\"margin-left:0px;\"><span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">We call</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>ReactDOM.render()</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">with the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>&lt;Welcome name=\"Sara\" /&gt;</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">element.</span></li>\n<li style=\"margin-left:0px;\"><span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React calls the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>Welcome</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">component with</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>{name: 'Sara'}</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">as the props.</span></li>\n<li style=\"margin-left:0px;\"><span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Our</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>Welcome</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">component returns a</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>&lt;h1&gt;Hello, Sara&lt;/h1&gt;</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">element as the result.</span></li>\n<li style=\"margin-left:0px;\"><span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React DOM efficiently updates the DOM to match</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>&lt;h1&gt;Hello, Sara&lt;/h1&gt;</code>.</span></li>\n</ol>\n<blockquote style=\"text-align:start;\"></blockquote>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><strong>Note:</strong></span> <span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Always start component names with a capital letter.</span></p>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React treats components starting with lowercase letters as DOM tags. For example,</span> <span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>&lt;div /&gt;</code></span> <span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">represents an HTML div tag, but</span> <span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>&lt;Welcome /&gt;</code></span> <span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">represents a component and requires</span> <span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>Welcome</code></span> <span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">to be in scope.</span></p>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">To learn more about the reasoning behind this convention, please read</span> <a href=\"https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized\" target=\"_self\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">JSX In Depth</span></a><span style=\"color: rgb(0,0,0);background-color: rgba(255,229,100,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">.</span></p>\n<h2 style=\"text-align:start;\"><br>&nbsp;</h2>\n",
      "region": "全球",
      "author": "admin",
      "roleId": 1,
      "auditState": 2,
      "publishState": 2,
      "createTime": 1615778777924,
      "star": 100,
      "view": 201,
      "id": 5,
      "publishTime": 1615778914498
    },
    {
      "title": "State and Lifecycle",
      "categoryId": 4,
      "content": "<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Now the clock ticks every second.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Let’s quickly recap what’s going on and the order in which the methods are called:</span></p>\n<ol>\n<li style=\"margin-left:0px;\"><span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">When</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>&lt;Clock /&gt;</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">is passed to</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>ReactDOM.render()</code>, React calls the constructor of the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>Clock</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">component. Since</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>Clock</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">needs to display the current time, it initializes</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>this.state</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">with an object including the current time. We will later update this state.</span></li>\n<li style=\"margin-left:0px;\"><span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React then calls the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>Clock</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">component’s</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>render()</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">method. This is how React learns what should be displayed on the screen. React then updates the DOM to match the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>Clock</code>’s render output.</span></li>\n<li style=\"margin-left:0px;\"><span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">When the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>Clock</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">output is inserted in the DOM, React calls the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>componentDidMount()</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">lifecycle method. Inside it, the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>Clock</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">component asks the browser to set up a timer to call the component’s</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>tick()</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">method once a second.</span></li>\n<li style=\"margin-left:0px;\"><span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Every second the browser calls the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>tick()</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">method. Inside it, the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>Clock</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">component schedules a UI update by calling</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>setState()</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">with an object containing the current time. Thanks to the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>setState()</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">call, React knows the state has changed, and calls the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>render()</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">method again to learn what should be on the screen. This time,</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>this.state.date</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">in the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>render()</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">method will be different, and so the render output will include the updated time. React updates the DOM accordingly.</span></li>\n<li style=\"margin-left:0px;\"><span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">If the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>Clock</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">component is ever removed from the DOM, React calls the</span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>componentWillUnmount()</code></span> <span style=\"color: rgb(26,26,26);font-size: medium;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">lifecycle method so the timer is stopped.</span></li>\n</ol>\n<h2 style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Using State Correctly</span></h2>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">There are three things you should know about</span> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>setState()</code>.</span></p>\n<h3 style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Do Not Modify State Directly</span></h3>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">For example, this will not re-render a component:</span></p>\n<p style=\"text-align:start;\"><br>&nbsp;</p>\n",
      "region": "全球",
      "author": "admin",
      "roleId": 1,
      "auditState": 2,
      "publishState": 2,
      "createTime": 1615778808893,
      "star": 300,
      "view": 454,
      "id": 6,
      "publishTime": 1615778916224
    },
    {
      "title": "Forms",
      "categoryId": 5,
      "content": "<h2 style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Controlled Components</span></h2>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">In HTML, form elements such as</span> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>&lt;input&gt;</code>,</span> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>&lt;textarea&gt;</code>, and</span> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>&lt;select&gt;</code></span> <span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with</span> <a href=\"https://reactjs.org/docs/react-component.html#setstate\" target=\"_self\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code>setState()</code></span></a><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:</span></p>\n<p style=\"text-align:start;\"><br>&nbsp;</p>\n",
      "region": "全球",
      "author": "admin",
      "roleId": 1,
      "auditState": 2,
      "publishState": 2,
      "createTime": 1615778852584,
      "star": 317,
      "view": 486,
      "id": 7,
      "publishTime": 1615778917074
    },
    {
      "title": "Thinking in React",
      "categoryId": 6,
      "content": "<p style=\"text-align:start;\"><span style=\"color: rgb(109,109,109);font-size: 18px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">React is, in our opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram.</span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">One of the many great parts of React is how it makes you think about apps as you build them. In this document, we’ll walk you through the thought process of building a searchable product data table using React.</span></p>\n<h2 style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Start With A Mock</span></h2>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Imagine that we already have a JSON API and a mock from our designer. The mock looks like this:</span></p>\n<p style=\"text-align:start;\"></p>\n<img src=\"https://reactjs.org/static/1071fbcc9eed01fddc115b41e193ec11/d4770/thinking-in-react-mock.png\" alt=\"Mockup\" style=\"height: 276.854px;width: 228px\"/>\n<p style=\"text-align:start;\"><span style=\"color: rgb(0,0,0);font-size: 17px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">Our JSON API returns some data that looks like this:</span></p>\n<p style=\"margin-left:0px;\"><br> <span style=\"font-size: 17px;\">The first thing you’ll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you’re working with a designer, they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!</span></p>\n<p style=\"margin-left:0px;\"><span style=\"font-size: 17px;\">But how do you know what should be its own component? Use the same techniques for deciding if you should create a new function or object. One such technique is the</span> <a href=\"https://en.wikipedia.org/wiki/Single_responsibility_principle\" target=\"_blank\"><span style=\"color: rgb(26,26,26);background-color: rgba(187,239,253,0.3);font-size: 17px;\">single responsibility principle</span></a><span style=\"font-size: 17px;\">, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.</span></p>\n<p style=\"margin-left:0px;\"><span style=\"font-size: 17px;\">Since you’re often displaying a JSON data model to a user, you’ll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. That’s because UI and data models tend to adhere to the same</span> <span style=\"font-size: 17px;\"><em>information architecture</em>. Separate your UI into components, where each component matches one piece of your data model.</span></p>\n<p style=\"margin-left:0px;\"></p>\n<img src=\"https://reactjs.org/static/eb8bda25806a89ebdc838813bdfa3601/6b2ea/thinking-in-react-components.png\" alt=\"Component diagram\" style=\"height: 319.521px;width: 275px\"/>\n<p style=\"margin-left:0px;\"><span style=\"font-size: 17px;\">You’ll see here that we have five components in our app. We’ve italicized the data each component represents.</span></p>\n<ol>\n<li style=\"margin-left:0px;\"><span style=\"color: rgb(26,26,26);font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><code><strong>FilterableProductTable</strong></code></span> <span style=\"color: rgb(26,26,26);font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\"><strong>(orange):</strong></span> <span style=\"color: rgb(26,26,26);font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\">contains the entirety of the example</span><br>&nbsp;</li>\n</ol>\n",
      "region": "亚洲",
      "author": "admin",
      "roleId": 1,
      "auditState": 2,
      "publishState": 2,
      "createTime": 1615778891518,
      "star": 781,
      "view": 889,
      "id": 8,
      "publishTime": 1615778917615,
      "status": false
    }
  ],
  "menus": [
    {
      "id": 1,
      "name": "系统管理",
      "path": "/system",
      "icon": "SettingOutlined",
      "parentId": 0,
      "order": 1,
      "createdAt": "2023-10-01",
      "key": 1,
      "children": [
        {
          "id": 2,
          "name": "用户管理",
          "path": "/system/users",
          "icon": "UserOutlined",
          "parentId": 1,
          "order": 1,
          "createdAt": "2023-10-01",
          "key": 2,
          "children": []
        },
        {
          "id": 3,
          "name": "角色管理",
          "path": "/system/roles",
          "icon": "TeamOutlined",
          "parentId": 1,
          "order": 2,
          "createdAt": "2023-10-01",
          "key": 3,
          "children": []
        },
        {
          "id": 4,
          "name": "菜单管理",
          "path": "/system/menus",
          "icon": "MenuOutlined",
          "parentId": 1,
          "order": 3,
          "createdAt": "2023-10-01",
          "key": 4,
          "children": []
        }
      ]
    },
    {
      "id": 2,
      "name": "用户管理",
      "path": "/system/users",
      "icon": "UserOutlined",
      "parentId": 1,
      "order": 1,
      "createdAt": "2023-10-01"
    },
    {
      "id": 3,
      "name": "角色管理",
      "path": "/system/roles",
      "icon": "TeamOutlined",
      "parentId": 1,
      "order": 2,
      "createdAt": "2023-10-01"
    },
    {
      "id": 4,
      "name": "菜单管理",
      "path": "/system/menus",
      "icon": "MenuOutlined",
      "parentId": 1,
      "order": 3,
      "createdAt": "2023-10-01"
    },
    {
      "id": 5,
      "name": "内容管理",
      "path": "/content",
      "icon": "FileTextOutlined",
      "parentId": null,
      "order": 2,
      "createdAt": "2023-10-01"
    },
    {
      "name": "文章管理",
      "path": "/content/article",
      "icon": "AlertFilled",
      "order": 3,
      "parentId": 5,
      "id": "M1-8cAvYsY24cBPPkYBZu",
      "createdAt": "2025-09-05T06:12:09.202Z"
    },
    {
      "name": "商品管理",
      "path": "/content/goods",
      "icon": "RightOutlined",
      "order": 3,
      "parentId": 5,
      "id": "v0puZUERRso09Wlxm1j8l",
      "createdAt": "2025-09-05 16:07:27"
    },
    {
      "name": "收获地址",
      "path": "/content/goods/address",
      "icon": "UpOutlined",
      "order": 7,
      "parentId": "v0puZUERRso09Wlxm1j8l",
      "id": "4qQ3PHulq8VOr1qRiwBVW",
      "createdAt": "2025-09-05 16:12:41",
      "key": "4qQ3PHulq8VOr1qRiwBVW"
    }
  ]
}